<template>
  <div class="tembox custom-scrollbar">
    <header class="header">
      <div class="flex-1">
        <span style="display: inline-block; font-weight: 700; line-height: 0.8">
          Shop Floor
        </span>
        <span style="font-size: 20px"
          >-
          {{ resData?.name }}
        </span>
      </div>
    </header>
    <div class="flex-1 flex">
      <section class="section">
        <div class="tips">
          You have <span>{{ openTaskQty }}</span> open task left. / 您 还 有
          <span>{{ openTaskQty }}</span> 条 还 未 处 理 任 务。
        </div>
        <div v-if="isChangeTable">
          <Form @submit="onSubmit">
            <Field
              v-model="rootCause"
              name="rootCause"
              :label="$t('common.rootCause')"
              :placeholder="$t('common.rootCause')"
              :rules="[{ required: true, message: $t('common.tip14') }]"
            />
            <Field
              v-model="actions"
              name="actions"
              :label="$t('common.actions')"
              :placeholder="$t('common.actions')"
              :rules="[{ required: true, message: $t('common.tip14') }]"
            />
            <div style="margin: 16px; display: flex">
              <Button round block type="info" native-type="submit">{{
                $t("common.confirm")
              }}</Button>
              <Button @click="cancelTable" round block native-type="cancel">{{
                $t("common.cancel")
              }}</Button>
            </div>
          </Form>
        </div>
        <div v-else>
          <div v-if="isShowOneTable" style="min-height: 68vh">
            <VeTable
              v-if="oneTableDataEdit.tableHeader"
              :columns="oneTableDataEdit.tableHeader"
              :table-data="oneTableDataEdit.details"
              :max-height="300"
            />
          </div>
          <div v-else>
            <ul class="card">
              <li>
                <div
                  class="inn"
                  style="
                    height: auto;
                    border-radius: 10px;
                    background-color: #fff;
                    box-shadow: 0 3px 6px #ebebeb;
                    margin-right: 10px;
                  "
                >
                  <div class="title">
                    <span style="font-size: 16px">
                      {{ resData?.name }}
                    </span>
                  </div>
                  <div class="flex innc">
                    <div class="flex-1 innl">
                      <div class="innl1">
                        <span>Target</span>
                        <span
                          >{{ resData?.strTarget
                          }}<span
                            style="display: inline-block; font-size: 18px"
                            >{{ resData.unit }}</span
                          ></span
                        >
                      </div>
                      <div class="innl1">
                        <span>Actual</span>
                        <span :class="{ red: isNormal == 'true' }"
                          >{{ resData?.strActual
                          }}<span
                            style="display: inline-block; font-size: 18px"
                            >{{ resData.unit }}</span
                          ></span
                        >
                      </div>
                      <div class="innl1" v-if="type !== 'SafetyLwdCase'">
                        <span>Shift</span>
                        <span> {{ resData?.shift }} </span>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li
                style="
                  display: flex;
                  border-radius: 10px;
                  background-color: #fff;
                  box-shadow: 0 3px 6px #ebebeb;
                  position: relative;
                  margin-top: 10px;
                "
              >
                <div
                  class="echarts2"
                  ref="chartRef"
                  :style="{
                    width: type == 'ManpowerProductivity' ? '90%' : '100%',
                  }"
                ></div>
                <!-- <div v-if="type == 'ManpowerProductivity'" class="chartTime">
                <p>
                  Start Time：
                  <a-date-picker
                    v-model:value="chartStartTime"
                    :format="'YYYY-MM-DD'"
                  />
                </p>
                <p>
                  End Time：
                  <a-date-picker
                    v-model:value="chartEndTime"
                    :format="'YYYY-MM-DD'"
                  />
                </p>
                <a-button type="primary" @click="submitChartTime"
                  >Search</a-button
                >
              </div> -->
              </li>
            </ul>
            <div
              style="
                box-shadow: rgb(149 157 165 / 20%) 0 8px 24px;
                margin-top: 10px;
              "
            >
              <div class="footerLeft inn" ref="tableRect">
                <div class="echarts" v-if="histogram?.length"></div>
                <plantKpi
                  :list="safetyLwdCase"
                  v-if="type == 'SafetyLwdCase'"
                />

                <!-- <BasicTable
                @register="registerTable"
                v-show="tableData.tableHeader"
                :scrollO="{ y: 240, x: 0 }"
              /> -->
                <VeTable
                  v-if="tableData.tableHeader"
                  :columns="tableData.tableHeader"
                  :table-data="tableData.details"
                  :max-height="300"
                />
                <!-- <DownloadOutlined
                v-if="type === 'ManpowerManagement'"
                @click="exportExcel"
                style="
                  position: absolute;
                  right: 18px;
                  top: 20px;
                  z-index: 9;
                  font-size: 18px;
                  color: #096be8;
                "
              /> -->
              </div>
              <div class="footerRight inn">
                <!-- @dblclick="goForemanAction" -->
                <!-- <div @click="handleCreate" class="inn-span">+</div> -->
                <!-- <VeTable
                  :columns="tableDataEdit.tableHeader"
                  :table-data="tableDataEdit.details"
                  :max-height="300"
                  :event-custom-option="eventCustomOption"
                /> -->
                <div class="table-container">
                  <table>
                    <thead>
                      <tr>
                        <th>Action Start Time</th>
                        <th>Actions</th>
                        <th>Root Cause</th>
                        <th>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr
                        v-for="item in tableDataEdit.details"
                        :key="item.id"
                        @touchstart="handleRowDblClick(item)"
                      >
                        <td>{{ item.startTime }}</td>
                        <td>{{ item.actions }}</td>
                        <td>{{ item.rootCause }}</td>
                        <td>{{ item.status }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- <footer
      style="display: flex; align-items: center; padding: 14px 10px 14px 40px"
    >
      <figure style="width: 70px; margin-right: 20px">
        <img
          style="width: 100%"
          src="../../../assets/images/logo1.png"
          alt=""
          srcset=""
        />
      </figure>
      <div>CONFIDENTIAL | SHA SHOP FLOOR MANAGEMENT</div>
    </footer> -->
    <!-- <BasicModal
      :draggable="false"
      v-bind="$attrs"
      @register="registerModal2"
      @ok="closeModal"
    >
      <BasicTable @register="registerTable2" />
    </BasicModal> -->
    <van-dialog
      style="z-index: 9999999"
      width="350px"
      confirm-button-color="black"
      v-model="showModal"
    >
      <VeTable
        :columns="tableData.tableHeader"
        :table-data="dialogTableList"
        :max-height="300"
        :min-height="200"
      />
    </van-dialog>
  </div>
</template>
<script>
import axios from "axios";
import dayjs from "dayjs";
import * as echarts from "echarts";
import plantKpi from "./plant_kpi.vue";
import { Form, Field, Button, Toast, Dialog } from "vant";
export default {
  name: "Login",
  components: {
    plantKpi,
    Form,
    Field,
    Button,
    Toast,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      currentFacility: "",
      resData: {},
      type: "",
      isNormal: "",
      foremanActualId: "",
      showZero: false,
      openTaskQty: "",
      isShowOneTable: false,
      tableData: {},
      safetyLwdCase: {},
      echarts2List: [],
      isBack: false,
      showLine: 1,
      lineUnit: {},
      chartStartTime: null,
      chartEndTime: null,
      barEcharts2: null,
      shaftName: [],
      targetList: [],
      mationlist: [],
      chartRef: null,
      maxValue: 0,
      tableDataEdit: {
        tableHeader: [
          {
            field: "startTime",
            title: "Action Start Time",
            key: "startTime",
            align: "center",
            renderBodyCell: ({ row, column, rowIndex }, h) => {
              // 自定义div 并且添加点击事件
              return h("div", {
                style: {
                  cursor: "pointer",
                  color: "#096be8",
                },
                on: {
                  click: () => {
                    this.handleRowDblClick(row);
                  },
                },
              });
            },
          },
          {
            field: "actions",
            title: "Actions",
            key: "actions",
            align: "center",
          },
          {
            field: "rootCause",
            title: "Root Cause",
            key: "rootCause",
            align: "center",
          },
          {
            field: "status",
            title: "Status",
            key: "status",
            align: "center",
          },
        ],
        details: [],
      },
      oneTableDataEdit: {
        tableHeader: [
          {
            title: this.$t("common.date"),
            field: "dateStr",
            key: "dateStr",
            align: "center",
          },
          {
            title: this.$t("common.shift"),
            field: "shift",
            key: "shift",
            align: "center",
          },
          {
            title: this.$t("common.shiftHandoverCategoryValue"),
            field: "shiftHandoverCategoryValue",
            key: "shiftHandoverCategoryValue",
            align: "center",
          },
          {
            title: this.$t("common.shiftHandoverTypeValue"),
            field: "shiftHandoverTypeValue",
            key: "type",
            align: "center",
          },
          {
            title: this.$t("common.handover"),
            field: "handover",
            key: "handover",
            align: "center",
          },
          {
            title: this.$t("common.statusValue"),
            field: "statusValue",
            key: "status",
            align: "center",
          },
          {
            title: this.$t("common.createBy"),
            field: "createBy",
            key: "createBy",
            align: "center",
          },
          {
            title: this.$t("common.createOn"),
            field: "createOn",
            key: "createOn",
            align: "center",
          },
        ],
        details: [],
      },
      // eventCustomOption: {
      //   bodyRowEvents: ({ row, rowIndex }) => {
      //     return {
      //       click: (event) => {
      //         const currentTime = new Date().getTime();
      //         if (currentTime - this.lastClickTime < 500) {
      //           this.isChangeTable = true;
      //           this.changeForemanActualId = row.foremanActionId;
      //         }
      //         this.lastClickTime = currentTime;
      //       },
      //     };
      //   },
      // },
      lastClickTime: 0,
      isChangeTable: false,
      rootCause: "",
      actions: "",
      changeForemanActualId: "",
      histogram: [],
      showModal: false,
      dialogTableList: [],
    };
  },
  mounted() {
    this.getLang();
    this.type = this.$route.query.type;
    this.isNormal = this.$route.query.isNormal;
    this.foremanActualId = this.$route.query.foremanActualId;
    this.isShowOneTable = JSON.parse(this.$route.query.isShowOneTable);
    if (this.isShowOneTable) {
      this.initName();
      this.initOneTableList();
    } else {
      this.getInfo();
    }
  },
  methods: {
    getLang() {
      this.currentFacility = localStorage.getItem("currentFacility");
    },
    async initName() {
      const res = await axios.post("/SicCore/GetForemans", {
        isDisplay: true,
        isHome: true,
      });
      this.dataList = res.items;
      this.resData = res.items.filter(
        (item) => item.foremanType == this.type
      )[0];
      this.openTaskQty = this.resData.openTaskQty;
    },
    async getInfo() {
      await this.initName();
      this.type == "ManpowerManagement" && (this.showZero = true);
      this.type == "OutputByKeyProcess" && (this.showZero = true);
      this.type == "ManpowerProductivity" && (this.showZero = true);
      this.type == "TimeConfirmation" && (this.showZero = true);

      const p = Promise.all([
        this.getTableData(),
        this.getEchartsList(),
        this.getForemanActionTaskList(),
      ]);
      p.then(() => {
        this.initMaxValue();
        this.initChartTime();
        // 添加表格轮播
        this.$nextTick(() => {
          // scrollFun();
        });
      });
      setTimeout(() => {
        this.initEcharts();
      }, 300);
    },
    async getTableData() {
      // setLoading(true);
      const res = await axios.post("/SicCore/GetForemanActualSon", {
        foremanType: this.type,
        foremanActualId: this.foremanActualId,
      });
      if (this.type == "SafetyLwdCase") {
        this.safetyLwdCase = res.safetyLwdCase;
      }

      if (res.tableHeader) {
        this.tableData = {
          ...this.tableData,
          tableHeader: JSON.parse(res?.tableHeader).map((item) => {
            return {
              field: item.dataIndex,
              key: item.title,
              title: item.title,
              align: "center",
            };
          }),
        };
      }
      if (res.details) {
        this.tableData = {
          ...this.tableData,
          details: JSON.parse(res?.details),
          histogram: res.histogram,
        };
      }
      this.histogram = res.histogram;

      // setColumns(this.tableData.tableHeader);

      // setTableData(this.tableData.details);
      if (res) {
        // setLoading(false);
        return true;
      }
    },
    async getEchartsList() {
      const { startTime, endTime } = this.getDate();
      let res = [];
      if (
        this.type == "OutputByKeyProcess" ||
        this.type == "TimeConfirmation"
      ) {
        res = await axios.post("/SicCore/GetForemanActualOutputChart", {
          foremanType: this.type,
          startTime,
          endTime,
          shift: this.resData.shift,
          chartOrientation: this.resData.chartOrientation,
          chartStatisticalModel: this.resData.chartStatisticalModel,
          chartType: this.resData.chartType,
        });
        this.shaftName = res.yAxisCoords;
        this.targetList = res.targets;
        this.echarts2List = res.item;
      } else {
        res = await axios.post("/SicCore/GetForemanActualChart", {
          foremanType: this.type,
          startTime,
          endTime,
          shift: this.resData.shift,
        });
        this.echarts2List = res.items;
      }

      this.showLine = res.legend;
      this.lineUnit = { y: res.yAxisName, x: res.xAxisName };
      if (res.code == 200) {
        return true;
      }
    },
    async getForemanActionTaskList() {
      const res = await axios.post("/SicCore/GetForemanActionTaskList", {
        foremanActualId: this.foremanActualId,
      });
      this.tableDataEdit.details = res.items;
      console.log(this.tableDataEdit.details, "tableData");

      if (res) {
        return true;
      }
    },
    getDate() {
      // const date = new Date();
      // function getN(num) {
      //   return num >= 10 ? num : `0${num}`;
      // }
      // const endTime = `${date.getFullYear()}-${getN(
      //   date.getMonth() + 1
      // )}-${getN(date.getDate())}`;
      // // ${getN(date.getHours())}:${getN(date.getMinutes())}:${getN(date.getSeconds())}
      // const startTime = `${date.getFullYear()}-${getN(date.getMonth())}-${getN(
      //   date.getDate()
      // )}
      // 使用dayjs获取当前时间
      const endDate = dayjs();

      // 获取一个月前的时间
      const startDate = endDate.subtract(1, "month");

      return {
        startTime: startDate.format("YYYY-MM-DD"),
        endTime: endDate.format("YYYY-MM-DD"),
      };
    },
    initMaxValue() {
      this.tableData.histogram?.forEach((item) => {
        if (item.value > this.maxValue) {
          this.maxValue = item.value;
        }
      });
      console.log(this.maxValue);
      this.echarts2List?.forEach((item) => {
        if (item.value > this.maxValue) {
          this.maxValue = item.value;
        }
      });
    },
    initChartTime() {
      const { startTime, endTime } = this.getDate();
      this.chartStartTime = dayjs(startTime, "YYYY-MM-DD");
      this.chartEndTime = dayjs(endTime, "YYYY-MM-DD");
      console.log(this.chartStartTime, this.chartEndTime);
    },
    initEcharts() {
      if (
        this.type == "OutputByKeyProcess" ||
        this.type == "TimeConfirmation"
      ) {
        this.initOutputEcharts();
        return;
      }

      let lineX = this.echarts2List?.map((item) => {
        return item.chartValues;
      });
      let lineY = this.echarts2List?.map((item) => {
        return {
          name: item.name,
          data: item.chartValues.map((item) => item.yAxis),
          type: "line",
        };
      });

      if (document.querySelector(".echarts")) {
        const barEcharts = echarts.init(document.querySelector(".echarts"));
        const option = {
          grid: {
            top: 25,
            bottom: "25%",
            right: 50,
            left: 40,
          },
          xAxis: {
            type: "category",
            data: this.histogram?.map((item) => item.x),
            nameLocation: "end", //坐标轴名称显示位置。
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "25",
            },
          },
          yAxis: {
            type: "value",
            // max: this.resData?.target,
            // interval: this.resData?.target / 2,
            // splitNumber: 4,
            // splitLine: {
            //   // 设置Y轴分割线的样式
            //   show: true,
            //   lineStyle: {
            //     color: ['#E0E6F1', '#E0E6F1', 'green', '#E0E6F1'],
            //   },
            // },
            max:
              (this.maxValue > this.resData?.target
                ? Math.ceil(this.maxValue)
                : this.resData?.target) + 5,
          },
          series: [
            {
              data: this.histogram?.map((item) => item.value),
              type: "bar",
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                  },
                },
              },
              markLine: {
                symbol: "none", // 去掉辅助线首尾圆点和箭头
                lineStyle: {
                  color: "green",
                  type: "solid", // 实线
                },
                data: [
                  {
                    yAxis: this.resData?.target, // 纵坐标的值，决定横向辅助线在y轴的位置
                    label: {
                      formatter: this.resData?.target,
                    },
                  },
                ],
              },
              // markLine: {
              //   symbol: ['none'],
              //   label: { position: 'start' },
              //   data: [
              //     {
              //       yAxis: this.resData?.target,
              //       lineStyle: {
              //         color: 'green',
              //         type: 'solid',
              //       },
              //     },
              //   ],
              // },
            },
          ],
        };
        barEcharts.setOption(option);
      }
      if (document.querySelector(".echarts2")) {
        this.barEcharts2 = echarts.init(document.querySelector(".echarts2"));
        const option2 = {
          title: {
            text: this.lineUnit.y,
            left: 10,
            top: 12,
            textStyle: {
              color: "#999",
              fontSize: 12,
              fontWeight: 400,
            },
          },
          grid: {
            top: 25,
            bottom: "25%",
            right: "10%",
            left: 65,
          },
          xAxis: {
            type: "category",
            data: this.echarts2List?.map((item) => item.name),
            nameLocation: "end", //坐标轴名称显示位置。
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "25",
            },
            name: this.lineUnit.x,
            nameLocation: "end", //坐标位置，支持start,end
            nameTextStyle: {
              fontSize: 12,
              color: "#999",
            },
          },
          yAxis: {
            type: "value",
            max:
              (this.maxValue > this.resData?.target
                ? Math.ceil(this.maxValue)
                : this.resData?.target) + 5,
          },
          series: [
            {
              data: this.echarts2List?.map((item) => item.value),
              type: "bar",
              itemStyle: {
                normal: {
                  color: "#73C0DE",
                  label: {
                    show: true,
                    position: "top",
                  },
                },
              },
              markLine: {
                symbol: "none", // 去掉辅助线首尾圆点和箭头
                lineStyle: {
                  color: "green",
                  type: "solid", // 实线
                },
                data: [
                  {
                    yAxis: this.resData?.target, // 纵坐标的值，决定横向辅助线在y轴的位置
                    label: {
                      formatter: this.resData?.target,
                    },
                  },
                ],
              },
            },
          ],
        };
        const optionsLine = {
          title: {
            text: this.lineUnit.y,
            left: 10,
            top: 18,
            textStyle: {
              color: "#999",
              fontSize: 12,
              fontWeight: 400,
            },
          },
          tooltip: {
            formatter: () => {
              if (
                this.type == "OnlineParameterOOS" ||
                this.type == "ProductsExcursion" ||
                this.type == "MachineAlarm"
              ) {
                return "Double-click to view details";
              }
            },
          },
          legend: {},
          grid: {
            left: "6%",
            right: "10%",
            bottom: "3%",
            containLabel: true,
            top: 30,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: lineX[0]?.map((item) => item.xAxis),
            nameLocation: "end", //坐标轴名称显示位置。
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "25",
            },
            name: this.lineUnit.x,
            nameLocation: "end", //坐标位置，支持start,end
            nameTextStyle: {
              fontSize: 12,
              color: "#999",
            },
          },
          yAxis: {
            type: "value",
          },
          series: lineY,
        };

        if (this.showLine == 1) {
          let arr = ["OnlineParameterOOS", "ProductsExcursion", "MachineAlarm"];
          if (arr.includes(this.type)) {
            this.barEcharts2.on("click", (e) => {
              const currentTime = new Date().getTime();
              if (currentTime - this.lastClickTime < 500) {
                this.barEcharts2.dispatchAction({
                  type: "hideTip",
                });
                console.log(123);
                this.showModal = true;
                let data = lineX[0].filter((item) => item.xAxis == e.name);
                this.dialogTableList = JSON.parse(data[0].parameters);
                console.log(this.dialogTableList);
              }
              // openEchatsTable(true);
              // setModalProps({
              //   showCancelBtn: false,
              //   width: 1000,
              // });
              // let data = lineX[0].filter((item) => item.xAxis == e.name);
              // console.log(data);
              // nextTick(() => {
              //   setColumns2(this.tableData.tableHeader);
              //   setTableData2(JSON.parse(data[0].parameters));
              // });
              this.lastClickTime = currentTime;
            });
          }
          this.barEcharts2.setOption(optionsLine);
        } else {
          this.barEcharts2.setOption(option2);
        }
      }
    },
    initOutputEcharts() {
      const echarts2 = echarts.init(this.$refs.chartRef);
      let xAxis = {};
      let yAxis = {};
      let series = [];
      let targetList2 = {
        name: "Target",
        type: "line",
        lineStyle: {
          color: "#EE6666",
          width: 4,
        },
        symbol: "circle",
        symbolSize: 10,
        itemStyle: {
          color: "#EE6666",
        },
        tooltip: {},
        data: this.targetList,
      };
      let option = {
        title: [
          {
            text:
              this.type == "OutputByKeyProcess"
                ? "Output"
                : "Time Confirmation",
            top: 20,
            textStyle: {
              color: "#999",
              fontSize: 12,
              fontWeight: 400,
            },
          },
          {
            text: `Shift : ${this.resData?.shift}`,
            top: 20,
            right: "10",
            textStyle: {
              color: "#999",
              fontSize: 20,
              fontWeight: 400,
            },
          },
        ],
        // tooltip: {
        //   // trigger: 'axis',
        //   // confine: true,
        //   formatter: (params, ticket) => {
        //     let result = params.seriesName + "<br/>";
        //     let arr = this.echarts2List.filter(
        //       (item) => item.name == params.seriesName
        //     );
        //     shaftName.value.forEach((item, index) => {
        //       result += `${item} : ${arr[0].values[index]}<br/>`;
        //     });
        //     return result;
        //   },
        // },
        legend: {
          width: "80%",
          type: "scroll", // 设置图例为滚动类型
          orient: "horizontal", // 横向显示图例
          height: 50, // 设置图例高度
          pageIconColor: "#ff781f", // 设置翻页箭头颜色
          pageTextStyle: {
            color: "#999", // 设置翻页数字颜色
          },
          pageIconSize: 11, // 设置翻页箭头大小
          textStyle: {
            // 设置图例文字的样式
            color: "#999",
            fontSize: 12,
          },
          itemHeight: 10, // 设置图例项的高度
          itemWidth: 15, // 设置图例项的宽度
          top: "1%", // 设置图例上边距
        },
        grid: {
          left: "5.5%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
      };
      if (this.resData?.chartOrientation == "Horizontal") {
        option.title[0].right = "20";
        option.title[1].left = "20";

        yAxis = {
          type: "category",
          boundaryGap: !(
            this.resData?.chartType == "LineChart" ||
            this.resData?.chartType == "Stacked"
          ),
          data: this.shaftName,
          nameLocation: "start", //坐标轴名称显示位置。
          name: "Time",
          nameTextStyle: {
            fontSize: 12,
            color: "#999",
          },
          nameGap: 20,
        };
        xAxis = {
          type: "value",
        };
      } else {
        xAxis = {
          type: "category",
          boundaryGap: !(
            this.resData?.chartType == "LineChart" ||
            this.resData?.chartType == "Stacked"
          ),
          data: this.shaftName,
          nameLocation: "end", //坐标轴名称显示位置。
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0,
            rotate: "25",
          },
          name: "Time",
          nameTextStyle: {
            fontSize: 12,
            color: "#999",
          },
        };
        yAxis = {
          type: "value",
        };
      }
      if (this.resData?.chartType == "LineChart") {
        series = this.echarts2List.map((item) => {
          return {
            name: item.name,
            type: "line",
            data: item.values,
            smooth: true,
            emphasis: {
              focus: "series",
              label: {
                show: true,
                position: "top",
              },
            },
          };
        });
        if (this.resData?.chartStatisticalModel == "Machine") {
        } else {
          series.unshift(targetList2);
        }
      } else if (this.resData?.chartType == "StackedBarChart") {
        series = this.echarts2List.map((item) => {
          return {
            name: item.name,
            type: "bar",
            stack: "total",
            // label: {
            //   show: true,
            // },
            emphasis: {
              disabled: false,
              focus: "series",
              label: {
                show: true,
                position: "top",
              },
            },
            data: item.values,
          };
        });
        series.unshift(targetList2);
      } else if (this.resData?.chartType == "GroupBarChart") {
        series = this.echarts2List.map((item) => {
          return {
            name: item.name,
            type: "bar",
            barGap: 0,
            label: {
              // show: true,
              formatter: "{c}",
              fontSize: 12,
            },
            emphasis: {
              focus: "series",
              label: {
                show: true,
                position: "top",
              },
            },
            data: item.values,
          };
        });
        if (this.resData?.chartStatisticalModel == "Machine") {
        } else {
          series.unshift(targetList2);
        }
      } else {
        series = this.echarts2List.map((item) => {
          return {
            name: item.name,
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            smooth: true,
            data: item.values,
            emphasis: {
              focus: "series",
              label: {
                show: true,
                position: "top",
              },
            },
          };
        });
        series.unshift(targetList2);
      }
      Object.assign(option, {
        xAxis,
        yAxis,
        series,
      });

      echarts2.setOption(option);
    },
    async initOneTableList() {
      const res = await axios.post("/SicCore/GetForemanShiftHandovers", {
        foremanActualId: this.foremanActualId,
      });
      console.log(res);
    },
    async onSubmit() {
      const res = axios
        .post("/SicCore/UpdateForemanAction", {
          foremanActionId: this.changeForemanActualId,
          rootCause: this.rootCause,
          actions: this.actions,
        })
        .then(() => {
          console.log(1);

          Toast.success(this.$t("common.success"));
          location.reload();
        });
    },
    handleRowDblClick(row) {
      const currentTime = new Date().getTime();
      if (currentTime - this.lastClickTime < 500) {
        this.isChangeTable = true;
        this.changeForemanActualId = row.foremanActionId;
      }
      this.lastClickTime = currentTime;
    },
    cancelTable() {
      this.isChangeTable = false;
      location.reload();
    },
  },
};
</script>
<style lang="less" scoped>
.tembox {
  display: flex;
  // width: 1920px;
  // height: 100%;
  // position: absolute;
  inset: 0;
  flex-direction: column;
  overflow: hidden;
  // background-size: 100% 100%;
  overflow: auto;
  transform-origin: 0 0;
  // background: url("./images/bg.png") no-repeat, url("./images/bg.png") no-repeat;
  background-position: 70% 20px, 60% 100%;
  width: 100%;
  padding-bottom: 50px;

  > .header {
    display: flex;
    position: relative;
    align-items: flex-end;
    color: #000;
    font-size: 20px;
  }

  // .header::before {
  //   content: "";
  //   position: absolute;
  //   right: -16px;
  //   bottom: -140px;
  //   width: 16px;
  //   height: 150px;
  //   background-color: #3ce9e1;
  // }

  .header {
    padding: 0px 5px;

    > h1 {
      font-size: 32px;
    }

    > h4 {
      color: #999;
      font-size: 18px;
    }
  }

  .section {
    flex: 1;
    // min-width: 1486px;
    padding: 0 5px;
    background-color: #f4f8ff;

    .echarts {
      width: 100%;
      height: 340px;
    }
    .echarts2 {
      width: 100%;
      height: 300px;
    }
    .tips {
      margin-bottom: 10px;
      padding: 5px 10px;
      background: linear-gradient(to bottom, #414e6b 5%, #002552);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .card {
      // display: flex;
      flex-wrap: wrap;
      // .fiveTen {
      //   width: 50% !important;
      // }

      > li {
        width: 100%;
        .tableul {
          background-color: #ebebeb;

          > li {
            display: flex;
            height: 60px;

            > span {
              display: flex;
              flex: 1;
              align-items: center;
              justify-content: center;
              border: 1px solid #fff;
              font-size: 20px;
              font-weight: 700;
            }
          }
        }

        > .inn {
          height: 300px;
          border-radius: 10px;
          background-color: #fff;
          box-shadow: 0 3px 6px #ebebeb;
          // overflow: hidden;

          .inn-span {
            position: absolute;
            z-index: 99;
            top: -36px;
            right: 11px;
            font-size: 30px;
            cursor: pointer;
          }

          .title {
            padding: 4px 20px;
            border-bottom: 2px solid #fff;
            border-radius: 4px;
            // background: linear-gradient(to bottom, #414e6b 5%, #002552);
            background-color: #ebebeb;
            color: #333;
            font-size: 16px;
            font-weight: 700;
          }

          .innc {
            align-items: center;
          }

          .innc-box5 {
            padding: 5px 10px;
            border-radius: 4px;
            background-color: #d9e7ff;
            font-size: 16px;
            text-align: center;
          }

          .innl {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            padding: 0 40px;

            .innl1 {
              display: flex;
              flex-direction: column;
              width: 100%;
              margin: 5px;
              height: 50px;
              overflow: hidden;
              // background-size: 100% 100%;
              border-radius: 4px;
              background: #f6f8fb;
              background: url("./images/boxbg.png") no-repeat;

              .red {
                color: #f00 !important;
              }

              > span:nth-child(1) {
                padding: 0 10px;
                color: #fff;
                font-size: 16px;
                // background-color: #025cff26;
              }

              > span:nth-child(2) {
                color: #fff244;
                font-family: "Arturito-Slab-2";
                font-size: 26px;
                text-align: center;
              }
            }
          }

          .innlo {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            > .innl1 {
              display: flex;
              align-items: center;
              justify-content: space-around;
              width: 225px;
              height: 60px;
              margin: 16px;
              padding: 0 8px;
              border: 6px solid #fff;
              border-radius: 6px;
              background-color: #025cff26;
              box-shadow: -10px -10px 0 #f6f8fb;
              color: #211f1f;

              > span:nth-child(1) {
                margin-right: 8px;
                font-size: 16px;
              }

              > span:nth-child(2) {
                flex: 1;
                color: #3571f3;
                font-family: "Arturito-Slab-2";
                font-size: 30px;
                text-align: right;
              }

              > span:nth-child(3) {
                position: relative;
                top: 6px;
                color: #3571f3;
                font-family: "Arturito-Slab-2";
              }
            }
          }
        }
      }
    }

    .card1 {
      display: flex;
      background-color: transparent;

      .boxl {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background-color: #d9e7ff;
        color: #000;

        > span:nth-child(1) {
          font-size: 18px;
        }

        > span:nth-child(2) {
          color: #3571f3;
          font-family: "Arturito-Slab-2";
          font-size: 34px;
        }
      }

      .boxr {
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 3px 6px #ebebeb;
        // overflow: hidden;

        .title {
          padding: 4px 20px;
          border-bottom: 2px solid #fff;
          border-radius: 4px;
          // background-color: #002653;
          background-color: #ebebeb;
          color: #333;
          font-size: 16px;
          font-weight: 700;
        }

        .text {
          min-height: 170px;
          max-height: 170px;
          padding: 10px;
          overflow: auto;

          p {
            font-size: 14px;
          }
        }
      }
    }

    .footerLeft {
      // position: relative;
      background-color: #fff;
      box-shadow: -10px -10px 0 #f6f8fb;
      overflow: hidden;
      min-height: 100px;
      :deep(.ant-table-wrapper) {
        padding: 6px 15px 0 6px !important;
      }
      :deep(.ant-table-placeholder) {
        height: 280px !important;
      }
      :deep(.ant-table.ant-table-middle .ant-table-tbody > tr > td) {
        padding: 7px;
      }
      transition: all 1s;
      :deep(.vben-basic-table) {
        // width: 92%;
      }
    }

    .footerRight {
      flex: 1;
      background-color: #fff;
      // width: 48% !important;
      box-shadow: -10px -10px 0 #f6f8fb;
      min-height: 100px;

      .inn {
        height: 300px;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 3px 6px #ebebeb;
        // overflow: hidden;

        .inn-span {
          position: absolute;
          z-index: 99;
          top: -36px;
          right: 11px;
          font-size: 30px;
          cursor: pointer;
        }
      }
    }
    .chartTime {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 0 30px 0 0;
    }
    :deep(.ant-picker) {
      width: 100%;
    }
  }
  // :deep(.ant-table-thead) {
  //   position: fixed;
  //   z-index: 99;
  //   width: 100%;
  //   .th {
  //   }
  // }
  :deep(.el-table__empty-block) {
    display: none;
  }
  .table-container {
    max-height: 300px;
    min-height: 100px;
    overflow-y: auto;
    border: 1px solid #ddd;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th,
  td {
    padding: 8px;
    text-align: left;
    font-size: 14px;
    text-align: center;
  }
  th {
    background-color: #f9f9f9;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #ddd;
    background-color: #fafafa;
    padding: 10px;
    font-weight: 500;
    color: #000000d9;
    font-size: 14px;
  }
  td {
    background-color: #fff;
    color: #000000d9;
    height: inherit;
    font-size: 14px;
    overflow: hidden;
  }
  tr {
    border-bottom: 1px solid #ddd;
  }
  /deep/ .van-dialog {
    z-index: 99999999 !important;
  }
}
</style>
